<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-02-06 09:48:11
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-03-28 18:01:20
 * @FilePath: \mould\src\components\public\el-tableColumn.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="app-container">
        <el-table :data="dataList" default-expand-all v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.2)"
            border fit :highlight-current-row="currentRow" style="width: 100%;" :height="height"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :row-key="rowKey"
            @selection-change="handleSelectionChange" :stripe="stripe" @sort-change="handleSortChange"
            :cell-class-name="classCell" @row-click="rowChange" :row-class-name="tableRowClassName">
            <!-- :span-method="mouseEnter" -->
            <!-- 是否有多选 -->
            <el-table-column type="selection" width="55" v-if="table_config.isCheckBox"></el-table-column>
            <!-- 是否需要序号 -->
            <el-table-column type="index" :index="hIndex" label="序号" width="55" align="center"
                v-if="table_config.isIndex" />

            <el-table-column v-for="item in table_config.thead" :key="item.prop" :prop="item.prop" :label="item.label"
                :min-width="item.minWidth" :sortable="item.sortable ? true : false" :align="item.align">
                <template slot-scope="scope">
                    <!-- 有状态过滤 -->
                    <span v-if="(item.filter && !item.btn)" :class="item.specialClass && item.specialClass(scope.row)">
                        {{ item.callback && item.callback(scope.row) }}
                    </span>
                    <el-button size="mini" v-else-if="(item.filter && item.btn)"
                        :type="item.specialClass && item.specialClass(scope.row)"
                        :class="item.specialClass && item.specialClass(scope.row)">{{
                            item.callback && item.callback(scope.row)
                        }}</el-button>
                    <el-input v-else-if="item.edit" v-model="scope.row[item.prop]" :type="item.type" placeholder="请输入"
                        @input="input(scope.row, dataList, item.type, item.prop, scope.row[item.prop])"
                        :disabled="item.disabled" min="0"></el-input>
                    <!-- <div v-else-if="item.option"></div> -->
                    <el-select class="selectOptions"
                        @change="input(scope.row, dataList, item.type, item.prop, scope.row[item.prop])"
                        v-else-if="item.option" v-model="scope.row[item.prop]" placeholder="请选择">
                        <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value">
                        </el-option>
                    </el-select>
                    <!-- 图片展示 -->
                    <div v-else-if="item.image" style="
                                      display: flex;
                                      height: 100%;
                                      align-items: center;
                                      flex-shrink: 0;">
                        <div v-for="(v, index) in scope.row[item.prop]" v-viewer :key="index" style="
                                        margin: 2px 3px;
                                        display: flex;
                                        flex-shrink: 0;
                                        align-items: center;
                                      ">
                            <img style="
                                          max-width: 100%;
                                          max-height: 100%;
                                          width: 18px;
                                          height: 20px;
                                        " :src="v[table_config.imgKeyWord]" />
                        </div>
                    </div>
                    <!-- 文件 -->
                    <div v-else-if="item.file" style="
                                      display: flex;
                                      height: 100%;
                                      align-items: center;
                                      flex-shrink: 0;
                                    ">
                        <div v-for="(v, index) in scope.row[item.prop]" @click="openPdfs(v)" :key="index" style="
                                        margin: 2px 3px;
                                        display: flex;
                                        flex-shrink: 0;
                                        align-items: center;
                                      ">
                            <img style="
                                          max-width: 100%;
                                          max-height: 100%;
                                          width: 18px;
                                          height: 20px;
                                        " src="@/assets/img/pdf.png" />
                        </div>
                    </div>
                    <!-- <img v-else-if="item.image" :src="scope.row[item.prop]" style="width:40px; height: 40px"> -->
                    <!-- switch开关 -->
                    <el-switch v-else-if="item.switch" v-model="scope.row[item.prop]" active-text="启用" active-value=1
                        inactive-value=0 inactive-text="停用" @change="item.callback && item.callback(scope.row)">
                    </el-switch>
                    <!-- detail -->
                    <el-button v-else-if="item.detail" @click="openDialog(scope.row)" @cell-dblclick="openDialog"
                        type="text" size="small" style="padding: 0 !important; margin: 0">
                        {{ scope.row[item.prop] }}
                    </el-button>
                    <!-- 有跳转 -->
                    <router-link v-else-if="item.router"
                        :to="{ path: item.routerPath, query: { name: scope.row[item.prop] } }">
                        {{ scope.row[item.prop] }}
                    </router-link>
                    <!-- 默认展示 -->
                    <span v-else>
                        <span v-if="flag == 0">
                            <a href="#" style="width:80px">{{
                                scope.row[item.prop]
                            }}</a>
                        </span>

                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </span>
                </template>
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column fixed="right" :label="table_config.operation.label" :width="table_config.operation.width"
                align="center" v-if="isShow">
                <template slot-scope="scope">
                    <template v-if="(table_config.operation.cols && !table_config.operation.detail)">
                        <div class="btn" v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">
                            <el-button @click="item.handleRow(scope.row, item.label)" :type="item.type" size="small">
                                {{ item.label }}
                            </el-button>
                        </div>
                    </template>
                    <template v-if="(table_config.operation.cols && table_config.operation.detail)">

                        <div @click="openDialog(scope.row)" @cell-dblclick="openDialog"
                            style="color:#409eff !important;cursor:pointer"
                            v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">{{ item.label }}
                        </div>

                    </template>
                    <template
                        v-if="(table_config.operation.cols && table_config.operation.detail && table_config.operation.prop)">
                        <div @click="openDialog(scope.row)" @cell-dblclick="openDialog"
                            style="color:#409eff !important;cursor:pointer"
                            v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">{{
                                scope.row[item.prop]
                            }}
                        </div>

                    </template>
                    <!-- 操作列超过3个，用更多下拉显示 -->
                    <el-dropdown v-if="isShowOperationCols">
                        <span class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in table_config.operation.cols.slice(2)" :key="item.label"
                                @click.native="item.handleRow(scope.row, item.label)">
                                {{ item.label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <!-- 附件展示 -->
        <div class="Control-2">
            <el-dialog top="4vh" :title="fFileName" :visible.sync="dialogPdf">
                <div :style="{ height: '800px' }">
                    <!-- <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe> -->
                    <embed :src="`${pdfUrl}#toolbar=0`" hidden="false" type="application/pdf" height="100%" width="100%" />
                </div>
            </el-dialog>
        </div>
        <pdfDialog :dialogVisible="dialogVisibles" @closes="closeDialog" :fileDetail="fileDetail"></pdfDialog>
    </div>
</template>
<script>
import pdfDialog from '@/components/public/pdf-dialog';

export default {
    props: {
        config: {
            type: Object,
            default: () => { }
        },
        rowKey: {
            type: String,
            default: 'fId'
        },
        height:{
            type: String,
            default: "100%"
            // calc(100% - 50px)
        },
        currentRow: {
            type: Boolean,
            default: true,
        },
        stripe: {
            type: Boolean,
            default: true,
        },

        dataList: {
            type: Array,
            default: () => {
                return []
            }
        },
        page: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 20
        },
        loading: {
            type: Boolean,
            default: false
        },
        statusType: {
            type: String,
            default: "0"
        },
        level: {
            type: Array,
            default: () => {
                return []
            }
        },
        earlyWarning: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    components: {
        pdfDialog
    },
    data() {
        return {
            table_config: {
                imgKeyWord: "",
                fileKeyWord: "",
                fileName: "",
                classCell: false,
                dialogHeight: "800px",
                thead: [],            // 表格头
                isCheckBox: false,    // 是否多选
                isIndex: false,      // 是否有序号
                isOperation: true,   // 是否有操作列表
                operation: {        // 操作
                    cols: []
                },
            },
            // 附件名称
            fFileName: null,
            // 附件地址
            pdfUrl: null,
            // 附件展示
            dialogPdf: false,
            dialogVisibles: false,
            fileDetail: {},
            earlyWarningText: "",
            flag: 0,

        }
    },
    computed: {
        isShow() {
            return this.table_config.isOperation && this.table_config.operation.cols.length
        },
        isShowOperationCols() {
            let list = this.table_config.operation.cols
            return list.length && list.length > 2
        },
        hIndex() {
            // 当前页数 - 1 * 每页数据条数 + 1
            return (this.page - 1) * this.pageSize + 1
        }
    },
    watch: {
        // dialogHeight
        // 监听传过来的config，进行初始化
        config: {
            handler(newVal) {
                // console.log(newVal);
                if (newVal) {
                    this.initConfig()
                }
            },
            immediate: true
        }
    },
    mounted() { },
    methods: {
        // 关闭二级弹框
        closeDialog() {
            this.dialogVisibles = false;
        },
        // 初始化配置
        initConfig() {
            for (let key in this.config) {
                if (Object.keys(this.table_config).includes(key)) {
                    this.table_config[key] = this.config[key]
                }
            }
        },
        // 多选事件
        handleSelectionChange(val) {
            console.log(val);
            this.$emit('selection-change', val)
        },
        // 点击当前行
        rowChange(val) {
            this.$emit('click-change', val)
        },
        classCell({ rowIndex, columnIndex }) {

            if (this.statusType == "1") {
                if (this.table_config.classCell) {
                    // this.$emit('classCell', row, column, rowIndex, columnIndex)
                    if (rowIndex == 0 && columnIndex == 0) {

                        return 'blueClass';
                    } else if (rowIndex == 1 && columnIndex == 0) {

                        return 'orangeClass';
                    } else if (rowIndex == 2 && columnIndex == 0) {

                        return 'redClass';
                    }
                }
            } else if (this.statusType == "2") {

                if (rowIndex == 2 && columnIndex != 0) {
                    // this.flag = 0
                    // this.earlyWarningText = ''
                    if (this.level[columnIndex] == 1) {

                        // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]
                        return 'blueClass1';
                        // return 'blueClass';
                    } else if (this.level[columnIndex] == 2) {
                        // this.flag = 0
                        // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]

                        return 'orangeClass1';
                    } else if (this.level[columnIndex] == 3) {
                        // this.flag = 0
                        // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]

                        return 'redClass1';
                    } else {
                        // this.flag = 1


                        return 'defaltClass1';
                    }
                }
                // console.log(45);
            }
        },
        // 当单元格 hover 进入时会触发该事件
        mouseEnter({ rowIndex, columnIndex }) {

            if (rowIndex == 2 && columnIndex != 0) {

                if (this.level[columnIndex] == 1) {
                    this.flag = 0
                    this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]


                } else if (this.level[columnIndex] == 2) {
                    this.flag = 0
                    this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]


                } else if (this.level[columnIndex] == 3) {
                    this.flag = 0
                    this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]


                } else {
                    this.flag = 1
                    this.earlyWarningText = ''



                }
            }
        },
        tableRowClassName() {
            // if (rowIndex === 2) {
            //     return 'warning-row';
            // }
            // return '';
        },
        // 排序事件
        handleSortChange(val) {
            this.$emit('sort-change', val)
        },
        openDialog(row) {
            // console.log(row);
            this.$emit('openDialog', row)
        },
        // 文件预览
        openPdfs(val) {
            this.dialogVisibles = true
            this.fileDetail = val
        },
        // input 输入值
        input(row, table, type, lable) {
            console.log(row, table, type, lable);
            if (type == 'number') {
                let value = row[lable].replace(/^(0+)|[^\d]+/g, ''); // 只能输入数字
                row[lable] = value - 0
                console.log(value);
            }
            this.$emit('inputValue', row, table)
        }
    }
}
</script>
   


<style scoped>